<template>
  <layout-content header="Services">
    <div style="float: left">
      <el-button
        v-has-permissions="{
          scope: 'namespace',
          apiGroup: '',
          resource: 'services',
          verb: 'create'
        }"
        type="primary"
        size="small"
        @click="onHandleCreate(true)"
      >
        YAML
      </el-button>
      <el-button
        v-has-permissions="{
          scope: 'namespace',
          apiGroup: '',
          resource: 'services',
          verb: 'create'
        }"
        type="primary"
        size="small"
        @click="onHandleCreate()"
      >
        {{ $t("commons.button.create") }}
      </el-button>
      <el-button
        v-has-permissions="{
          scope: 'namespace',
          apiGroup: '',
          resource: 'services',
          verb: 'delete'
        }"
        type="primary"
        size="small"
        :disabled="selections.length === 0"
        @click="confirmDelete()"
      >
        {{ $t("commons.button.delete") }}
      </el-button>
    </div>
    <complex-table
      v-model:selects="selections"
      v-loading="uiState.loading"
      :data="srcList"
      :pagination-config="query.paginationConfig"
      :search-config="query.searchConfig"
      @search="reloadResourceList"
    >
      <el-table-column type="selection" fix />
      <el-table-column
        :label="$t('commons.table.name')"
        prop="metadata.name"
        show-overflow-tooltip
      >
        <template #default="{ row }">
          <el-button link type="primary" @click="onHandleViewDetails(row)">
            {{ row.metadata.name }}
          </el-button>
        </template>
      </el-table-column>
      <el-table-column
        :label="$t('business.namespace.namespace')"
        prop="metadata.namespace"
      >
        <template #default="{ row }">
          {{ row.metadata.namespace }}
        </template>
      </el-table-column>
      <el-table-column
        :label="$t('business.configuration.type')"
        prop="spec.type"
      >
        <template #default="{ row }">
          {{ row.spec.type }}
        </template>
      </el-table-column>
      <el-table-column
        label="ClusterIP"
        prop="spec.clusterIP"
        min-width="100px"
        show-overflow-tooltip
      >
        <template #default="{ row }">
          {{ row.spec.clusterIP || "" }}
        </template>
      </el-table-column>
      <el-table-column
        label="ExternalIP"
        prop="spec.externalIPs"
        min-width="100px"
        show-overflow-tooltip
      >
        <template #default="{ row }">
          <div
            v-for="(value, index) in row.status.loadBalancer.ingress"
            :key="`${index}`"
          >
            <div>
              <span style="font-size: 12px">
                {{ value.ip }}
              </span>
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        :label="$t('business.network.target_port')"
        min-width="120px"
        show-overflow-tooltip
      >
        <template #default="{ row }">
          <div
            v-for="(value, index) in row.spec.ports"
            :key="index"
            type="info"
            size="small"
          >
            <span v-if="row.spec.type === 'NodePort'" style="font-size: 12px">
              {{ value.port }}:{{ value.nodePort }}/{{ value.protocol }}
            </span>
            <span
              v-if="
                row.spec.type !== 'NodePort' && value.port === value.targetPort
              "
              style="font-size: 12px"
            >
              {{ value.port }}/{{ value.protocol }}
            </span>
            <span
              v-if="
                row.spec.type !== 'NodePort' && value.port !== value.targetPort
              "
              style="font-size: 12px"
            >
              {{ value.port }}:{{ value.targetPort }}/{{ value.protocol }}
            </span>
            <br />
          </div>
        </template>
      </el-table-column>
      <el-table-column
        :label="$t('business.network.selector')"
        prop="spec.selector"
        min-width="200px"
      >
        <template #default="{ row }">
          <el-tag
            v-for="(key, index) in row.spec.selector"
            v-bind:key="index"
            type="info"
            size="small"
          >
            {{ key }}={{ row.spec.selector[key] }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column
        :label="$t('commons.table.created_time')"
        prop="metadata.creationTimestamp"
        fix
      >
        <template #default="{ row }">
          {{ getAge(row.metadata.creationTimestamp) }}
        </template>
      </el-table-column>
      <ko-table-operations
        :buttons="options.buttons"
        :label="$t('commons.table.action')"
      />
    </complex-table>
  </layout-content>
</template>

<script setup lang="ts">
import LayoutContent from "@/views/domain/kubeHud/views/components/layout/LayoutContent.vue";
import ComplexTable from "@/views/domain/kubeHud/views/components/complex-table/index.vue";
import KoTableOperations from "@/views/domain/kubeHud/views/components/ko-table-operations/index.vue";
import { useI18n } from "vue-i18n";
import { Service, useK8SApi } from "@/views/domain/kubeHud/api/k8s";
import {
  useBaseCRUDProvider,
  useBaseCRUDRoute
} from "@/views/domain/kubeHud/api/provider/baseListProvider";
import { reactive } from "vue";
import { KRouteSecret } from "@/views/domain/kubeHud/router";
import { checkPermissions } from "@/views/domain/kubeHud/utils/permission";
import { getAge } from "@/views/domain/kubeHud/utils";

// import { deleteService, getService, listServices } from "@/api/services";
// import { downloadYaml } from "@/utils/actions";
// import { checkPermissions } from "@/utils/permission";

type Prop = {};
const props = defineProps<Prop>();

const { t } = useI18n();
const { serviceRepo } = useK8SApi();

const {
  selections,
  srcList,
  query,
  router,
  uiState,
  downloadSourceAsYaml,
  getResourceDetails,
  getResourceList,
  updateResource,
  deleteResource,
  confirmDelete,
  reloadResourceList
} = useBaseCRUDProvider({
  request: {
    getDetailsReq: serviceRepo.getServiceDetail,
    getListReq: serviceRepo.getService,
    updateReq: serviceRepo.updateService,
    deleteReq: serviceRepo.deleteService,
    createReq: serviceRepo.createService
  }
});

const { pushTo } = useBaseCRUDRoute({ router });

const options = reactive({
  buttons: [
    {
      label: t("commons.button.edit"),
      icon: "el-icon-edit",
      click: row => {
        pushTo(KRouteSecret.Edit, {
          name: row.metadata.name,
          namespace: row.metadata.namespace
        });
      },
      disabled: () => {
        return !checkPermissions({
          scope: "namespace",
          apiGroup: "",
          resource: "services",
          verb: "update"
        });
      }
    },
    {
      label: t("commons.button.edit_yaml"),
      icon: "el-icon-edit",
      click: row => {
        pushTo(KRouteSecret.Edit, {
          name: row.metadata.name,
          namespace: row.metadata.namespace,
          yaml: "true"
        });
      },
      disabled: () => {
        return !checkPermissions({
          scope: "namespace",
          apiGroup: "",
          resource: "services",
          verb: "update"
        });
      }
    },
    {
      label: t("commons.button.download_yaml"),
      icon: "el-icon-download",
      click: row => {
        downloadSourceAsYaml(row);
      }
    },
    {
      label: t("commons.button.delete"),
      icon: "el-icon-delete",
      click: row => {
        confirmDelete(row);
      },
      disabled: () => {
        return !checkPermissions({
          scope: "namespace",
          apiGroup: "",
          resource: "services",
          verb: "delete"
        });
      }
    }
  ]
});

const onHandleCreate = (yaml?: boolean) => {
  pushTo(KRouteSecret.Create, { yaml: yaml ? "true" : "false" });
};

const onHandleViewDetails = (row: Service) => {
  pushTo(KRouteSecret.Details, {
    name: row.metadata.name,
    namespace: row.metadata.namespace
  });
};
</script>

<style scoped></style>
